<template>
  <div class="page-container">
    <!-- 查询区域 -->
    <div class="search-bar">
      <label for="grade" class="form-label">年级：</label>
      <el-select v-model="selectedGrade" id="grade" placeholder="请选择年级" style="width: 180px; margin-right: 10px">
        <el-option v-for="grade in gradeOptions" :key="grade.value" :label="grade.label" :value="grade.value" />
      </el-select>
      <el-button type="primary" @click="handleQuery">查询</el-button>
      <el-button type="success" @click="handleAdd">添加</el-button>
    </div>

    <!-- 数据表格 -->
    <el-table :data="tableData" border style="width: 100%; margin-top: 20px">
      <el-table-column prop="id" label="Id" align="center" />
      <el-table-column prop="name" label="学科" align="center" />
      <el-table-column prop="levelName" label="年级" align="center" />
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="primary" size="default" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="danger" size="default" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[10, 20, 30]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
      style="margin-top: 20px" />
  </div>
</template>

<script setup lang="ts">

import { educationGetlist, educationFindlist, educationDeleted } from "@/api/education";
import { ref } from 'vue';
import { ElSelect, ElOption, ElButton, ElTable, ElTableColumn, ElPagination } from 'element-plus';
import { RouterView, useRouter } from "vue-router";
import { edcationTest } from "@/stores/education";

const route = useRouter()
// 选中的年级
const selectedGrade = ref();
// 表格数据（模拟，实际需接口获取）
const tableData = ref<tableDataType[] | undefined>([]);
// 分页相关
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(30); // 模拟总数，实际从接口取


// educationGetlist('/api/admin/education/subject/list').then(res => {
//   console.log(res, 'educationGetlist');
//   tableData.value = res.response
// })

educationFindlist('/api/admin/education/subject/page', {
  level: selectedGrade.value,
  pageIndex: currentPage.value,
  pageSize: pageSize.value
}).then(res => {
  console.log(res);
  tableData.value = res.response?.list
  total.value = res.response?.pages as number
})

// 年级下拉选项
const gradeOptions = ref([
  { label: '一年级', value: 1 },
  { label: '二年级', value: 2 },
  { label: '三年级', value: 3 },
  { label: '四年级', value: 4 },
  { label: '五年级', value: 5 },
  { label: '六年级', value: 6 },
  { label: '初一', value: 7 },
  { label: '初二', value: 8 },
  { label: '初三', value: 9 },
  { label: '高一', value: 10 },
  { label: '高二', value: 11 },
  { label: '高三', value: 12 },
]);


// 查询按钮事件
// 查询可以代替获取页面，但为倒序
const handleQuery = () => {
  console.log('查询条件：', selectedGrade.value);
  // 实际逻辑：调用接口，根据 selectedGrade 筛选数据
  console.log(selectedGrade.value);

  educationFindlist('/api/admin/education/subject/page', {
    level: selectedGrade.value,
    pageIndex: currentPage.value,
    pageSize: pageSize.value
  }).then(res => {
    console.log(res);
    tableData.value = res.response?.list

  })

};

// 添加按钮事件
const handleAdd = () => {
  console.log('点击添加，可打开弹窗或跳转到添加页面');
  // 实际逻辑：打开添加弹窗或路由跳转
  route.push('/subject-create')
};

// 编辑按钮事件
const handleEdit = (row: educationCreateListType) => {
  console.log('编辑行数据：', row);
  // 实际逻辑：打开编辑弹窗，回显 row 数据
  edcationTest().ruleForm.grade = row.level
  edcationTest().ruleForm.levelName = row.levelName
  edcationTest().ruleForm.name = row.name
  edcationTest().ruleForm.adds = true
  edcationTest().ruleForm.id = row.id
  route.push('/subject-create')
};

// 删除按钮事件
const handleDelete = (row: RuleForm) => {
  console.log('删除行数据：', row);
  // 实际逻辑：调用删除接口，移除 tableData 对应项
  educationDeleted('api/admin/education/subject/delete/' + row.id).then(res => {
    educationFindlist('/api/admin/education/subject/page', {
      level: selectedGrade.value,
      pageIndex: currentPage.value,
      pageSize: pageSize.value
    }).then(res => {
      tableData.value = res.response?.list
      total.value = res.response?.pages as number
    })
  })



};

// 每页条数改变
const handleSizeChange = () => {
  // pageSize.value = val
  handleQuery(); // 重新查询
};

// 当前页改变
const handleCurrentChange = (val: number) => {
  currentPage.value = val;
  console.log(currentPage.value);

  handleQuery(); // 重新查询
};
</script>

<style scoped>
.page-container {
  padding: 20px;
}

.search-bar {
  display: flex;
  align-items: center;
}

.form-label {
  margin-right: 8px;
}
</style>
